<template>
  <div class="app-container">
    <br /><br />
    <span class="log">商品日志</span>
        <span class="loca">提示</span>
    <hr class="hrform" />
    <br />
    <div
      style="background:#F0FDF5; width:100%;height:125px;border:2px dashed #9FE2B6"
    >
      <p style="color: #9FE2B6;  text-indent: 25px;margin-top:10px">操作提示</p>
      <p style="  text-indent: 25px;margin-top:15px; ">
        查看商品管理员操作日志
      </p>
    </div>
    <div class="deit">
      <div class="crumbs">
        <br />  
        <el-breadcrumb separator="/"> </el-breadcrumb>
        <div class="cantainer">
          <el-table
            border="true"
            height="450"
            max-height="450"
            show-overflow-tooltip="true"
            style="width: 100%;"
            :data="
              userList.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            "
          >
            <el-table-column prop="id"> </el-table-column>

            <el-table-column label="操作人员"  height="30" prop="diff" width="220">
            </el-table-column>

            <el-table-column label="操作时间" height="30" prop="name" width="370">
            </el-table-column>
            <el-table-column label="信息变更" height="30" prop="state" width="518">
            </el-table-column>
            <el-table-column label="变迁" height="30" prop="flag" width="358">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click="dele(scope.row)"
                  >获取</el-button
                >

                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  @click="fone(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <br />
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[8, 14, 20, 30]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userList.length"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script async>
import request from "../../../api/request";
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 8, //    每页的数据
      arr: [],
      userList: [], //存放数据的序列
      pay: false,
      isinit: [],
    };
  },
  name: "log",
  components: {},

  created() {//请求
    // let obj = { method: "GET" };
    // request("/users/login", obj).then((res) => {
    //   console.log(res);
    //   res.forEach((item, index) => {
    //     this.userList.push(item);
    //   });
    // });
  },

  methods: {
    handleSizeChange: function(size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },

    handleUserList() {
      this.userList = this.arr;
    },

    dele(e) {
      console.log(JSON.stringify(e));
    },

    fone(scop) {
      this.userList.forEach((item, index) => {
        if (item == scop) {
          this.userList.splice(index, 1);
        }
      });
    },

    login() {
      let obj = {
        method: "GET",
      };
      request("/users/login", obj).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style>
.log {
  display: inline-block;
  width: 130px;
  height: 45px;
  border-top: 2px solid #9fe2b6;
  border-left: 2px solid #9fe2b6;
  border-right: 2px solid #9fe2b6;
  position: absolute;
  margin-top: -44px;
  margin-left: 0px;
  text-align: center;
  line-height: 45px;
}

.hrform {
 width: 92%;
  margin-left: 128px;
  border: 1px solid #9fe2b6;
}

.loca{
    position: absolute;
    margin-top: -30px;
    margin-left: 1570px;
}

.loca:hover{
    color:#9fe2b6;
   cursor:pointer
}
</style>
